<template>
    <view class="main">
        <view class="top">
            <view class="item">
                <view class="cover">
                    <image src="/static/test.jpg" />
                </view>
                <view class="content">
                    <!-- over-2 -->
                    <view class="title ">国聘行动--“全国节能宣传周"绿色发展专场节能宣传周"绿色发展专场节能宣传周"绿色发展专场节能宣传周"绿色发展专场</view>
                    <view class="time dispaly-center">
                        <view class="icon dispaly-align-center">
                            进行中
                        </view>
                        <view class="time-str">活动时间 2023.05.13-2023.06.30</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="tab">
            <tn-tabs v-model="currentTabIndex" bg-color="rgba(0,0,0,0)" :bottom-shadow="false" active-color="#000"
                active-font-size="40" :bar="false">
                <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index"
                    :title="item.text" />
            </tn-tabs>
        </view>
        <view class="container">
            <view v-if="changeType == 1">
                <hCard />
            </view>
            <view v-else class="desc">
                活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import type { TabDataType } from '@/types/more'
import { ref, onMounted } from 'vue';
import hCard from '@/components/jobCard/hCard.vue';

const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
    {
        text: '招聘单位',
        type: 1
    },
    {
        text: '活动介绍',
        type: 2
    }
])

// 切换tab
const changeType = ref<number>(1)
const changeTab = (item: TabDataType) => {
    changeType.value = item.type
}
</script>
<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .top {
        .item {
            margin-bottom: 20rpx;

            .content {
                padding: 17rpx 14rpx;
                background-color: #fff;
                border-radius: 0 0 20rpx 20rpx;
                width: 690rpx;

                .title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #000000;
                    line-height: 40rpx;
                    margin-bottom: 15rpx;
                }

                .time {
                    .icon {
                        margin-right: 10rpx;
                        width: 91rpx;
                        height: 36rpx;
                        border-radius: 21rpx;
                        border: 2rpx solid #008298;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #008298;
                    }

                    .time-str {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #7E7E7E;
                    }
                }
            }

            .cover {
                image {
                    width: 690rpx;
                    height: 273rpx;
                    border-radius: 20rpx 20rpx 0 0;
                }
            }
        }
    }

    .tab {
        margin-bottom: 23rpx;
    }

    .container {
        .desc {
            padding: 30rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #7E7E7E;
            line-height: 50rpx;
        }
    }
}
</style>